<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 16:49:08
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:07:33
-->
<template>
  <div class="apply_query">
    <!-- 内容开始 -->
    <div class="content" v-loading="loading">
      <!-- 搜索开始 -->
      <div class="search_box">
        <div class="wrapper">
          <div class="form">
            <el-form label-width="100px" size="small" inline :rules="rules" :model="form" ref="applyForm">
              <el-form-item label="手机号" >
                <el-input v-model="form.telephone" ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="queryApply">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 搜索结束 -->
      <!-- 报名信息开始 -->
      <div class="applies"  v-if="applies.length>0">
        <div class="wrapper">
          <div class="title">报名的游学项目</div>
          <div class="project" v-for="apply in applies" :key="apply.id">
            <div class="pic">
              <img :src="apply.project.figure" alt="">
            </div>
            <div class="introduce">
              <div class="name"> <strong>{{apply.project.name}}</strong> </div>
              <div class="time"> <strong>时间：</strong> {{apply.project.beginTime |fmtDate}} ~ {{apply.project.endTime |fmtDate}}</div>
              <div class="money"><strong>费用：</strong> {{apply.project.projectMoney}} 元</div>
              <div class="money"><strong>报名时间：</strong> {{apply.insertTime | fmtTime}}   </div>
              <div class="money">
                <strong>报名状态：</strong> 
                <el-tag size="mini" :type="apply.status==='未确认'?'danger':'success'">{{apply.status}}</el-tag> 
                &nbsp;&nbsp;
                <el-button v-if="apply.status==='已确认'" type="text" @click="toPay" size="small">去付款</el-button>
              </div>
              <div class="desc"><strong>简介：</strong> {{apply.project.introduce}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="applies" v-else>
        <div class="wrapper">
          <div style="text-align:center">暂无报名信息， <el-button type="text" @click="$router.push('/')">去报名</el-button> </div>
        </div>
      </div>
      <!-- /报名信息结束 -->
    </div>
    <!-- /内容结束 -->
  </div>
</template>
<script>
import {get} from '../utils/request'
export default {
  data(){
    return {
      loading:false,
      applies:[],
      form:{ },
      rules:{
        telephone: [ { required: true, message: '请输入手机号', trigger: 'blur' } ],
      }
    }
  },
  created(){

  },
  methods:{
    // 去付款
    toPay(){
      window.location.href="http://localhost:9527"
    },
    queryApply(){
      this.$refs['applyForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          let url ="/index/apply/query"
          get(url,this.form).then(response => {
            this.applies = response.data;
            this.loading = false;
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.apply_query {
  .content {
    min-height: 600px;
  }
  .wrapper {
    width: 1204px;
    margin: 0 auto;
  }
  // 研学项目详情
  .search_box {
    padding: 1em 0;
    .wrapper {
      width: 980px;
    }
    .prop {
      line-height: 2em;
    }
    .form {
      width: 800px;
      margin: 0 auto;
      padding: 2em;
      text-align:center;
    }
    .title {
      font-size: 20px;
      line-height: 3em;
      text-align: center;
      color: #333333;
      font-weight: bold;
    }
    .info {
      text-align: center;
      line-height: 2em;
    }
    .btns {
      text-align: center;
    }
  }
  
  // 游学项目
  .applies {
    .title {
      font-size: 20px;
      line-height: 4em;
      border-bottom: 1px solid #f4f4f4;
    }
    .project {
      display: flex;
      border-bottom: 1px solid #f4f4f4;
      padding: 1em 0;
      cursor: pointer;
      .pic {
        width: 300px;
        height: 200px;
        overflow: hidden;
        background-color: #f4f4f4;
        border-radius: 5px;
        img {
          width: 100%;
        }
      }
      .introduce {
        padding: 0 2em;
        flex: 1;
        div {
          line-height: 2em;
        }
      }
    }
  }
  // 第一行
  .first_row {
    img {
      width: 100%;
    }
  }
}
</style>